<template>
    <div class="qw-index">
        <!-- 登录失败提示 -->
        <div v-if="loginStatus.failed" class="info-card error-card">
            <div class="card-title-wrapper">
                <h2 class="card-title">登录提示</h2>
            </div>
            <p>{{ loginStatus.errorMessage }}</p>
            <button @click="handleLogin" class="primary-button">重新登录</button>
        </div>

        <div class="content">
            <!-- 业主基础信息区域 -->
            <div class="info-card owner-info">
                <div class="card-title-wrapper">
                    <h2 class="card-title">业主基础信息</h2>
                    <button class="refresh-button" @click="refreshPage" title="刷新页面">
                        <IconRefresh />
                    </button>
                </div>

                <!-- 个人基本信息部分 -->
                <div class="owner-profile">
                    <div class="avatar-section">
                        <div class="owner-avatar">
                            {{ pageData.owner_info.name.substring(0, 1) }}
                        </div>
                    </div>
                    <div class="profile-info">
                        <div class="owner-name">{{ pageData.owner_info.name }}</div>
                        <div class="owner-contact">
                            <span class="phone-icon">
                                <IconPhone />
                            </span>
                            {{ pageData.owner_info.phone }}
                        </div>
                    </div>
                </div>

                <!-- 房产信息卡片组 -->
                <div class="info-section">
                    <div class="section-header">
                        <IconHouse />
                        <span class="section-title">房产信息</span>
                    </div>
                    <div class="room-container">
                        <div
                            v-for="(room, index) in pageData.owner_info.rooms"
                            :key="`room-${index}`"
                            class="room-card"
                            :class="{ selected: selectedHouseId === room.house_id }"
                            @click="handleRoomSelect(room.house_id)"
                        >
                            <div class="room-number">
                                <IconHouse />
                                {{ room.number }}
                            </div>
                            <div class="room-area">{{ room.area }}㎡</div>
                        </div>
                        <!-- 空数据提示 -->
                        <div v-if="pageData.owner_info.rooms.length === 0" class="empty-data-tip">
                            <div class="empty-icon">
                                <IconHouse />
                            </div>
                            <p>暂无房产信息</p>
                        </div>
                    </div>
                </div>

                <!-- 车位信息卡片组 -->
                <div class="info-section">
                    <div class="section-header">
                        <IconParking />
                        <span class="section-title">车位信息</span>
                    </div>
                    <div class="parking-container">
                        <div
                            v-for="(parking, index) in pageData.owner_info.parkings"
                            :key="`parking-${index}`"
                            class="parking-card"
                        >
                            <div class="parking-header">
                                <IconParking />
                                <div class="parking-number">
                                    {{ parking.number }}
                                </div>
                            </div>
                            <div class="plate-list">
                                <div
                                    v-for="(plate, pIndex) in parking.plates"
                                    :key="`plate-${index}-${pIndex}`"
                                    class="plate-tag"
                                    :class="'plate-tag ' + plate.color + '-plate'"
                                >
                                    {{ plate.number }}
                                    <span :class="'plate-tag-label ' + plate.color + '-label'">{{
                                        plate.use
                                    }}</span>
                                </div>
                            </div>
                        </div>
                        <!-- 空数据提示 -->
                        <div
                            v-if="pageData.owner_info.parkings.length === 0"
                            class="empty-data-tip"
                        >
                            <div class="empty-icon">
                                <IconParking />
                            </div>
                            <p>暂无车位信息</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 维修与投诉订单统计 -->
            <div class="info-card order-stats">
                <div class="card-title-wrapper">
                    <h2 class="card-title">维修与投诉订单统计</h2>
                </div>

                <!-- 维修订单统计 -->
                <div class="info-section">
                    <div class="section-header">
                        <IconTool />
                        <span class="section-title">维修订单</span>
                    </div>
                    <div class="stats-cards">
                        <div class="stat-card">
                            <div class="stat-icon repair-icon">
                                <IconRepair />
                            </div>
                            <div class="stat-info">
                                <div class="stat-value">{{ pageData.order_stats.repair.all }}</div>
                                <div class="stat-label">所有维修</div>
                            </div>
                        </div>

                        <div class="stat-card">
                            <div class="stat-icon pending-icon">
                                <IconPending />
                            </div>
                            <div class="stat-info">
                                <div class="stat-value">
                                    {{ pageData.order_stats.repair.pending }}
                                </div>
                                <div class="stat-label">未完成维修</div>
                            </div>
                        </div>

                        <div class="stat-card">
                            <div class="stat-icon no-feedback-icon">
                                <IconNoFeedback />
                            </div>
                            <div class="stat-info">
                                <div class="stat-value">
                                    {{ pageData.order_stats.repair.no_feedback }}
                                </div>
                                <div class="stat-label">未回访维修</div>
                            </div>
                        </div>

                        <div class="stat-card">
                            <div class="stat-icon completed-icon">
                                <IconCompleted />
                            </div>
                            <div class="stat-info">
                                <div class="stat-value">
                                    {{ pageData.order_stats.repair.completed }}
                                </div>
                                <div class="stat-label">已回访维修</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 投诉订单统计 -->
                <div class="info-section">
                    <div class="section-header">
                        <IconEdit />
                        <span class="section-title">投诉订单</span>
                    </div>
                    <div class="stats-cards">
                        <div class="stat-card">
                            <div class="stat-icon complaint-icon">
                                <IconComplaint />
                            </div>
                            <div class="stat-info">
                                <div class="stat-value">
                                    {{ pageData.order_stats.complaint.all }}
                                </div>
                                <div class="stat-label">所有投诉</div>
                            </div>
                        </div>

                        <div class="stat-card">
                            <div class="stat-icon pending-icon">
                                <IconPending />
                            </div>
                            <div class="stat-info">
                                <div class="stat-value">
                                    {{ pageData.order_stats.complaint.pending }}
                                </div>
                                <div class="stat-label">未完成投诉</div>
                            </div>
                        </div>

                        <div class="stat-card">
                            <div class="stat-icon no-feedback-icon">
                                <IconNoFeedback />
                            </div>
                            <div class="stat-info">
                                <div class="stat-value">
                                    {{ pageData.order_stats.complaint.no_feedback }}
                                </div>
                                <div class="stat-label">未回访投诉</div>
                            </div>
                        </div>

                        <div class="stat-card">
                            <div class="stat-icon completed-icon">
                                <IconCompleted />
                            </div>
                            <div class="stat-info">
                                <div class="stat-value">
                                    {{ pageData.order_stats.complaint.completed }}
                                </div>
                                <div class="stat-label">已回访投诉</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 费用统计 -->
            <div class="info-card fee-stats">
                <div class="card-title-wrapper">
                    <h2 class="card-title">费用统计</h2>
                </div>

                <!-- 费用汇总部分 -->
                <div class="info-section">
                    <div class="section-header">
                        <IconWallet />
                        <span class="section-title">费用汇总</span>
                    </div>
                    <div class="fee-summary">
                        <div class="summary-item">
                            <span class="summary-label">费用详情笔数：</span>
                            <span class="summary-value"
                                >{{ pageData.fee_stats.summary.count }}笔</span
                            >
                        </div>
                        <div class="summary-item highlight">
                            <span class="summary-label">欠费金额：</span>
                            <span class="summary-value"
                                >¥{{ pageData.fee_stats.summary.debt }}</span
                            >
                        </div>
                    </div>
                </div>

                <!-- 费用明细部分 -->
                <div class="info-section">
                    <div class="section-header">
                        <IconList />
                        <span class="section-title">费用明细</span>
                    </div>
                    <div class="fee-table-container">
                        <table class="fee-table">
                            <thead>
                                <tr>
                                    <th>费用类型</th>
                                    <th>金额 (元)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>物业费</td>
                                    <td>¥{{ pageData.fee_stats.details.property }}</td>
                                </tr>
                                <tr>
                                    <td>能源费</td>
                                    <td>¥{{ pageData.fee_stats.details.energy }}</td>
                                </tr>
                                <tr>
                                    <td>车位费</td>
                                    <td>¥{{ pageData.fee_stats.details.parking }}</td>
                                </tr>
                                <tr>
                                    <td>特约服务费</td>
                                    <td>¥{{ pageData.fee_stats.details.service }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 日志显示模块 -->
            <LogDisplay
                :logs="logs"
                :visible="showLogs"
                @clear-logs="clearLogs"
                @update:isLogExpanded="isLogExpanded = $event"
                @update:visible="toggleDebugMode"
            />
        </div>
    </div>
</template>

<script setup>
import IconRepair from '@/components/icons/IconRepair.vue'
import IconPending from '@/components/icons/IconPending.vue'
import IconNoFeedback from '@/components/icons/IconNoFeedback.vue'
import IconCompleted from '@/components/icons/IconCompleted.vue'
import IconComplaint from '@/components/icons/IconComplaint.vue'
import LogDisplay from '@/components/LogDisplay.vue'
import { onMounted, ref, computed, watch, defineComponent } from 'vue'
import { useUserStore } from '@/stores/user'
import qwsdk from '@/utils/qwsdk'
import { isLoggedIn,clearLoginStatus } from '@/utils/auth'
import { getCustomInfo } from '@/api/qwAuth'
// 导入新的图标组件
import IconRefresh from '@/components/icons/IconRefresh.vue'
import IconPhone from '@/components/icons/IconPhone.vue'
import IconHouse from '@/components/icons/IconHouse.vue'
import IconParking from '@/components/icons/IconParking.vue'
import IconTool from '@/components/icons/IconTool.vue'
import IconEdit from '@/components/icons/IconEdit.vue'
import IconWallet from '@/components/icons/IconWallet.vue'
import IconList from '@/components/icons/IconList.vue'
// 定义组件名称，确保是多词的
defineComponent({
    name: 'WecomIndex',
})

const loginStatus = ref({
    failed: false,
    errorMessage: '',
})

// 所有页面数据统一到这一个变量中
const pageData = ref({
    owner_info: {
        name: '业主姓名',
        phone: '13800138000',
        rooms: [
            {
                area: '120',
                number: 'PC-46',
                house_id: '1234567890',
            },
            {
                area: '130',
                number: 'PC-47',
                house_id: '1234567891',
            },
            {
                area: '130',
                number: 'PC-47',
                house_id: '1234567892',
            },
        ],
        parkings: [
            {
                number: 'PC-46',
                plates: [
                    {
                        color: 'green',
                        number: '津-AF65119',
                    },
                    {
                        color: 'blue',
                        number: '津-MMQ771',
                    },
                    {
                        color: 'green',
                        number: '津-AD00688',
                    },
                ],
            },
        ],
    },
    order_stats: {
        repair: {
            all: 0,
            pending: 0,
            no_feedback: 0,
            completed: 0,
        },
        complaint: {
            all: 0,
            pending: 0,
            no_feedback: 0,
            completed: 0,
        },
    },
    fee_stats: {
        summary: {
            count: 0,
            debt: '0.00',
        },
        details: {
            property: '0.00',
            energy: '0.00',
            parking: '0.00',
            service: '0.00',
        },
    },
})

// 日志相关状态
const logs = ref([])
const debug = ref(false) // 调试模式标志，默认为false
const showLogs = computed(() => debug.value) // 只有debug为true时才显示日志
const isLogExpanded = ref(false) // 控制日志面板展开状态

// 添加选中房产状态
const selectedHouseId = ref('')

// 处理房产卡片点击
const handleRoomSelect = async (houseId) => {
    if (selectedHouseId.value === houseId) {
        // 如果点击的是当前选中的房产，设置为第一个房产的ID
        const firstHouseId = pageData.value.owner_info.rooms[0]?.house_id
        if (firstHouseId && firstHouseId !== houseId) {
            selectedHouseId.value = firstHouseId
            await getCustomData()
        }
        return
    }
    // 更新选中的房产ID
    selectedHouseId.value = houseId
    // 获取新的数据
    await getCustomData()
}

// 处理重新登录
const handleLogin = () => {
    const userStore = useUserStore()
    addLog('用户点击重新登录按钮')
    clearLoginStatus()
    userStore.qwWebLogin()
}

// 监听debug变化，同步到localStorage
watch(debug, (newValue) => {
    localStorage.setItem('debug', newValue.toString())
    if (newValue) {
        // 加载请求日志
        loadRequestLogs()
    }
})

// 加载请求日志
const loadRequestLogs = () => {
    try {
        const requestLogs = JSON.parse(localStorage.getItem('requestLogs') || '[]')
        requestLogs.forEach((log) => {
            addLog(`[API] ${log.content}`)
        })
    } catch (e) {
        addLog('加载请求日志失败: ' + e)
    }
}

// 格式化时间
const formatTime = () => {
    const now = new Date()
    const hours = now.getHours().toString().padStart(2, '0')
    const minutes = now.getMinutes().toString().padStart(2, '0')
    const seconds = now.getSeconds().toString().padStart(2, '0')
    const milliseconds = now.getMilliseconds().toString().padStart(3, '0')
    return `${hours}:${minutes}:${seconds}.${milliseconds}`
}

// 添加日志 - 统一的日志方法
const addLog = (content) => {
    logs.value.push({
        time: formatTime(),
        content: typeof content === 'object' ? JSON.stringify(content) : String(content),
    })
    // 限制日志数量，防止内存占用过多
    if (logs.value.length > 100) {
        logs.value.shift()
    }
}

// 清除日志
const clearLogs = () => {
    logs.value = []
}

// 初始化企业微信SDK
const initWecomSDK = async () => {
    addLog('开始初始化企业微信JSSDK')

    // 设置日志记录器
    qwsdk.setLogger(addLog)

    try {
        // 初始化企业微信SDK
        await qwsdk.initialize()
    } catch (error) {
        addLog('企业微信JSSDK初始化失败: ' + error)
    }
}

// 获取外部联系人信息
const getCustomData = async () => {
    try {
        // 用户已登录，初始化企业微信SDK
        const contactId = await qwsdk.getCurExternalContact()
        addLog('获取外部联系人ID: ' + JSON.stringify(contactId))

        // 构建请求参数
        const params = { custom_id: contactId.userId }
        // 如果有选中的房产，添加house_id参数
        if (selectedHouseId.value) {
            params.house_id = selectedHouseId.value
        }

        const contactInfo = await getCustomInfo(params)
        addLog('获取外部联系人信息: ' + JSON.stringify(contactInfo))

        // 检查contactInfo.code是否等于0
        if (contactInfo && contactInfo.code === 0 && contactInfo.data) {
            // 验证数据结构
            pageData.value = contactInfo.data
            addLog('成功加载用户数据' + JSON.stringify(pageData.value))

            // 如果没有选中的房产，且有房产数据，则默认选中第一个
            if (!selectedHouseId.value && pageData.value.owner_info.rooms.length > 0) {
                selectedHouseId.value = pageData.value.owner_info.rooms[0].house_id
            }
        } else {
            // 否则提示错误信息
            loginStatus.value.failed = true
            loginStatus.value.errorMessage = contactInfo.message || '获取用户信息失败，请重试'
            addLog('获取用户信息失败: ' + (contactInfo.message || '未知错误'))
        }
    } catch (error) {
        // 处理异常情况
        loginStatus.value.failed = true
        loginStatus.value.errorMessage = '获取用户信息时发生错误，请重试:' + error
        addLog('获取用户信息时发生错误: ' + error)
    }
}

// 在组件挂载后检查登录状态，并在登录后初始化企业微信SDK
onMounted(async () => {
    // 检查localStorage中的debug设置
    const debugSetting = localStorage.getItem('debug')
    if (debugSetting === 'true') {
        debug.value = true
        addLog('调试模式已启用')
        loadRequestLogs()
    }

    addLog('组件挂载完成')

    // 检查用户是否已登录
    if (isLoggedIn()) {
        addLog('用户已登录，初始化企业微信SDK')

        initWecomSDK()

        getCustomData()
    } else {
        addLog('用户未登录，不初始化企业微信SDK')
        // 检查URL中是否有code但登录失败的情况
        const urlParams = new URLSearchParams(window.location.search)
        if (urlParams.has('code') && !isLoggedIn()) {
            loginStatus.value.failed = true
            loginStatus.value.errorMessage = '登录失败，请重试或联系管理员'
            addLog('检测到URL中有code但登录失败')
        }

        // 可以选择订阅登录事件，在用户登录后初始化SDK
        const userStore = useUserStore()
        // 监听登录状态变化
        watch(
            () => userStore.isLoggedIn,
            (newValue) => {
                if (newValue) {
                    addLog('用户登录状态变化，初始化企业微信SDK')
                    initWecomSDK()
                }
            },
        )
    }
})

// 切换调试模式
const toggleDebugMode = (value) => {
    debug.value = value
}

// 添加刷新页面的方法
const refreshPage = () => {
    // 实现刷新页面的逻辑
    addLog('用户点击刷新页面按钮')
    // 使用window.location.reload()来刷新页面
    window.location.reload()
}
</script>

<style scoped>
.qw-index {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background-color: #f5f7fa;
    color: #333;
    font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    line-height: 1;
}

h1 {
    color: #409eff;
    margin-bottom: 2rem;
    font-weight: 600;
    text-align: center;
}

.content {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    transition: all 0.3s ease;
    margin-bottom: 0; /* 移除底部边距，由.content的gap控制 */
}

.info-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.card-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #409eff;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #eaeaea;
    min-height: 40px;
    box-sizing: border-box;
    position: relative;
}

.card-title {
    color: #409eff;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    height: auto;
    margin: 0;
}

.refresh-button {
    background-color: #ecf5ff;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #409eff;
    transition: all 0.3s ease;
    margin-left: 10px;
    padding: 0;
    flex-shrink: 0;
}

.refresh-button:hover {
    background-color: #409eff;
    color: white;
    transform: rotate(180deg);
}

.refresh-button svg {
    transition: transform 0.5s ease;
}

.refresh-button:active svg {
    transform: rotate(360deg);
}

/* 业主基础信息区域样式 */
.owner-info {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.owner-profile {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: #f9fafc;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    align-items: center;
}

.avatar-section {
    position: relative;
}

.owner-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #409eff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(64, 158, 255, 0.3);
}

.owner-status {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #67c23a;
    color: white;
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.owner-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: #303133;
}

.owner-contact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #606266;
}

.phone-icon {
    color: #409eff;
    display: flex;
    align-items: center;
}

.info-section {
    background-color: #f9fafc;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
    color: #409eff;
    padding-bottom: 0.8rem;
    border-bottom: 1px dashed #e0e0e0;
}

.section-title {
    font-weight: 600;
    font-size: 1rem;
}

/* 房间容器和车位容器 */
.room-container,
.parking-container {
    display: flex;
    gap: 1rem;
    width: 100%;
    overflow-x: auto;
    padding: 0.5rem 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: #409eff #f5f7fa;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* 自定义滚动条样式 */
.room-container::-webkit-scrollbar,
.parking-container::-webkit-scrollbar {
    height: 6px;
}

.room-container::-webkit-scrollbar-track,
.parking-container::-webkit-scrollbar-track {
    background: #f5f7fa;
    border-radius: 3px;
}

.room-container::-webkit-scrollbar-thumb,
.parking-container::-webkit-scrollbar-thumb {
    background: #409eff;
    border-radius: 3px;
}

/* 调整房间卡片样式 */
.room-card {
    border: 1px solid #d9ecff;
    border-radius: 8px;
    overflow: visible;
    background-color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    width: 160px;
    min-width: 160px;
    cursor: pointer;
    position: relative;
}

.room-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid #409eff;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.room-card.selected::before {
    opacity: 1;
}

.room-card.selected {
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.room-card.selected::after {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background-color: #409eff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .room-card {
        width: 200px;
        min-width: 140px;
    }

    .room-card.selected::after {
        width: 18px;
        height: 18px;
        font-size: 10px;
        top: -6px;
        right: -6px;
    }
}

/* 调整房间号和面积的显示样式 */
.room-number,
.room-area {
    padding: 0.35rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.room-number {
    background-color: #ecf5ff;
    color: #409eff;
    font-weight: 600;
    border-bottom: 1px solid #d9ecff;
}

.room-number svg {
    width: 14px;
    height: 14px;
}

/* 车位卡片样式 */
.parking-card {
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    background-color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.parking-header {
    padding: 0.6rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ecf5ff;
    color: #409eff;
    border-bottom: 1px solid #d9ecff;
}

.parking-number {
    font-weight: 600;
}

.plate-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.8rem;
}

.plate-tag {
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    position: relative;
}

/* 绿色车牌标签 */
.green-plate {
    background-color: #f0f9eb;
    color: #67c23a;
    border: 1px solid #e1f3d8;
}

/* 蓝色车牌标签 */
.blue-plate {
    background-color: #ecf5ff;
    color: #409eff;
    border: 1px solid #d9ecff;
}

/* 黄色车牌标签 */
.yellow-plate {
    background-color: #fdf6ec;
    color: #e6a23c;
    border: 1px solid #faecd8;
}

/* 白色车牌标签 */
.white-plate {
    background-color: #f8f9fa;
    color: #606266;
    border: 1px solid #e4e7ed;
}

/* 黑色车牌标签 */
.black-plate {
    background-color: #303133;
    color: #ffffff;
    border: 1px solid #606266;
}

/* 新标签样式调整 */
.plate-tag .new-tag {
    display: inline-block;
    background-color: #75d100;
    color: white;
    font-size: 0.65rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    margin-left: 0.5rem;
    font-weight: bold;
    vertical-align: top;
}

/* 维修与投诉订单统计样式 */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding-top: 0.5rem;
}

.stat-card {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    color: white;
}

.repair-icon {
    background-color: #409eff;
}

.pending-icon {
    background-color: #e6a23c;
}

.no-feedback-icon {
    background-color: #f56c6c;
}

.completed-icon {
    background-color: #67c23a;
}

.complaint-icon {
    background-color: #909399;
}

.stat-info {
    flex: 1;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 600;
    color: #303133;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.85rem;
    color: #606266;
}

/* 费用统计样式 */
.fee-summary {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 0.5rem;
}

.summary-item {
    background-color: white;
    padding: 1rem 1.2rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.summary-item.highlight {
    background-color: #f0f7ff;
    border-left: 4px solid #409eff;
}

.summary-label {
    color: #606266;
    margin-right: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.summary-value {
    color: #303133;
    font-weight: 600;
    font-size: 0.95rem;
}

.fee-table-container {
    overflow-x: auto;
    padding-top: 0.5rem;
}

.fee-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.fee-table th,
.fee-table td {
    padding: 0.9rem;
    border-bottom: 1px solid #ebeef5;
    font-size: 0.9rem;
}

.fee-table th {
    background-color: #f5f7fa;
    color: #606266;
    font-weight: 500;
}

.fee-table tbody tr:hover {
    background-color: #f0f7ff;
}

.fee-table tbody tr:last-child td {
    border-bottom: none;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .qw-index {
        padding: 0.5rem;
        font-size: 13px;
    }

    h1 {
        font-size: 1.4rem;
        margin-bottom: 1.5rem;
    }

    .info-card {
        padding: 1rem;
    }

    .card-title {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .stats-cards {
        grid-template-columns: 1fr 1fr;
    }

    .fee-summary {
        flex-direction: column;
    }

    .summary-item {
        width: 100%;
    }

    .tag-items {
        flex-direction: column;
    }

    .plate-list {
        flex-direction: column;
    }

    .room-card {
        width: 100px;
        min-width: 100px;
    }

    .room-number,
    .room-area {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }

    .room-number svg {
        width: 12px;
        height: 12px;
    }
}

/* 特小屏幕适配 */
@media (max-width: 480px) {
    .stats-cards {
        grid-template-columns: 1fr;
    }

    .fee-summary {
        gap: 0.8rem;
    }

    .stat-value {
        font-size: 1.3rem;
    }
}

/* 错误提示卡片样式 */
.error-card {
    width: 100%;
    background-color: #fff;
    border-left: 4px solid #f56c6c;
    margin-bottom: 1.5rem;
}

.primary-button {
    background-color: #409eff;
    color: white;
    border: none;
    padding: 0.7rem 1.4rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    margin-top: 1rem;
    transition: background-color 0.3s;
}

.primary-button:hover {
    background-color: #337ecc;
}

/* 响应式调整 */
@media (min-width: 768px) and (max-width: 991px) {
    .room-card,
    .parking-card {
        width: calc(50% - 0.5rem);
    }
}

@media (min-width: 992px) {
    .room-card,
    .parking-card {
        width: calc(33.333% - 0.67rem);
    }
}

/* 登录错误信息样式调整 */
.error-card p {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    color: #f56c6c;
    font-size: 0.95rem;
}

/* 添加覆盖样式确保标题垂直居中 */
.card-title-wrapper h2 {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.new-tag {
    display: inline-block;
    background-color: #75d100;
    color: white;
    font-size: 0.65rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    margin-left: 0.5rem;
    font-weight: bold;
    vertical-align: top;
}

/* 空数据提示样式 */
.empty-data-tip {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 1rem;
    background-color: white;
    border-radius: 8px;
    border: 1px dashed #d9ecff;
    color: #909399;
}

.empty-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #c0c4cc;
    display: flex;
    justify-content: center;
    align-items: center;
}

.empty-data-tip p {
    margin: 0;
    font-size: 0.9rem;
}

/* 车牌标识标签通用样式 */
.plate-tag-label {
    display: inline-block;
    font-size: 0.65rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    margin-left: 0.5rem;
    font-weight: bold;
    vertical-align: top;
}

/* 绿色标签 */
.green-label {
    background-color: #75d100;
    color: white;
}

/* 黄色标签 */
.yellow-label {
    background-color: #e6a23c;
    color: white;
}

/* 黑色标签 */
.black-label {
    background-color: #000000;
    color: white;
}

/* 白色标签 */
.white-label {
    background-color: #409eff;
    color: white;
}

/* 蓝色标签 */
.blue-label {
    background-color: #409eff;
    color: white;
}
</style>
